<template>
  <div>
    <div class="btnbox">
      <el-button
        type="primary"
        class="w-[109px] rounded-[23px]"
        color="#3721FF"
        @click="handleBtnClick({ type: 'add' })"
      >
        <Icon icon="ep:plus" :size="12" color="#fff" />
        <span>新增</span>
      </el-button>
    </div>
    <div class="mt-[22px] tablebox">
      <el-table :data="tableData">
        <el-table-column prop="areaName" label="地区" />
        <el-table-column
          prop="ruleType"
          label="归属类型"
          filter-icon="ep:picture"
          :filters="[
            { text: '最大购买数', value: '最大购买数' },
            { text: '最大订单金额', value: '最大订单金额' }
          ]"
          :filter-method="filterHandler"
        >
          <template #filter-icon>
            <div class="ml-[10px] mt-[-8px]">
              <Icon icon="ep:filter" :size="12" color="#101010" />
            </div>
          </template>
          <template #default="{ row }"> {{ row.ruleType }}:{{ row.ruleValue }} </template>
        </el-table-column>
        <el-table-column label="创建时间 ">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="140">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              size="small"
              style="color: #3721ff"
              @click="handleBtnClick({ type: 'edit', row })"
              >编辑
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              style="color: #ff4e00"
              @click="handleBtnClick({ type: 'delItem', row })"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </div>
    <TemplateAction ref="templateActionRef" @confirm="handleBtnClick" :info="selectRow" />
  </div>
</template>
<script setup lang="ts">
import TemplateAction from './components/templateAction.vue'
import { throttle } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import * as AdviceApi from '@/api/mall/trade/advice'
import type { TableColumnCtx, TableInstance } from 'element-plus'

const message = useMessage()

const templateActionRef = ref<InstanceType<typeof TemplateAction> | null>(null)

const total = ref(0)

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})

const tableData = ref<AdviceApi.AdviceItemsVO[]>([])

const selectRow = ref({})

const filterHandler = (value: string, row: any, column: TableColumnCtx<any>) => {
  const property = column['property']
  return row[property] === value
}
const handelTemplate = () => {
  templateActionRef.value?.show()
}

const handleBtnClick = (e) => {
  let type = e.type
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${e}不存在`)
  }
}

const fn = {
  delItem: ({ row }) => {
    if (row.id) {
      deleteItem(row.id)
    }
  },
  edit({ row }) {
    selectRow.value = row
    templateActionRef.value?.show()
  },
  add() {
    selectRow.value = {}
    templateActionRef.value?.show()
  },
  confirm: throttle(async ({ data }) => {
    console.log(data, '点击确认')
    if (data.id) {
      //编辑
      try {
        await AdviceApi.updateAdvice(data)
        message.success('修改成功')
      } finally {
      }
    } else {
      //新增
      try {
        await AdviceApi.addAdvice(data)
        message.success('新增成功')
      } finally {
      }
    }
    templateActionRef.value?.hide()
    getList()
  })
}
const deleteItem = async (id) => {
  try {
    await message.delConfirm()
    await AdviceApi.deleteAdvice(id)
    message.success('删除成功')
  } finally {
    getList()
  }
}

const getList = async () => {
  try {
    const data = await AdviceApi.getAdvicePage(queryParams.value)
    tableData.value = data.list
    total.value = data.total
  } catch (e) {
    console.log(e)
  } finally {
  }
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
:deep(.el-button) {
  height: 45px !important;
  border-radius: 23px !important;
}
</style>
